<!-- https://medium.com/js-dojo/vue-3-tips-best-practices-54aec91d95dc -->
<template>
  <div>
    <h2>Person</h2>
    <p>name: {{ person.name }}</p>
    <p>age: {{ person.age }}</p>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';

let person = reactive({
  name: 'xiaobai',
  age: 22
})

onMounted(() => {
  setTimeout(() => {
    // not work
    // person = {
    //   name: 'xiaoli',
    //   age: 11
    // }

    // fixed
    Object.assign(person, {
      name: 'xiaoli',
      age: 11
    })
  }, 1000);
})
</script>

<style scoped>
</style>
